<template>
	<uni-file-picker :readonly="readonly" v-model="imageValue" :successArr="successArr" :fileMediatype="fileMediatype" :fileExtname="fileMediatype == 'image' ? ['.jpg', '.png', '.jpeg'] : fileExtname" mode="grid" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deleteFn" :limit="limitLength">
		<div class="upload-default" v-if="defaultImg" :style="{ backgroundImage: `url(${ defaultImg })` }"></div>
		<div class="upload-icon" v-else>
			<text class="text">{{ text }}</text>
			<text class="text">{{ smallText }}</text>
		</div>
		<slot></slot>
	</uni-file-picker>
</template>

<script>
	import protal from "@/api/protal"
	import { base } from '@/api/base.js'

	export default {
		props: {
			value: {
				type: [String, Array],
			},
			readonly: {
				type: Boolean,
				default: false
			},
			fileType: {
				type: String,
				default () {
					return 'image'
				}
			},
			limitLength: {
				type: Number,
				default: 9
			},
			text: {
				type: String,
				default: '上传图片'
			},
			smallText: {
				type: String,
				default: ''
			},
			fileMediatype: {
				type: String,
				default: 'image'
			},
			fileExtname: {
				type: Array,
				default () {
					return []
				}
			},
			pageType: {
				type: String,
				default: ''
			},
			defaultImg: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				imageValue: [],
				images: [],
				isCooperate: false, // 是否进行过添加删除操作  操作之后不走watch
				num: 0,
				successArr: []
			}
		},
		watch: {
			value: {
				handler(v) {
					if (this.limitLength == 1 && this.value) {
						this.imageValue = [{ url: v }]
						this.images = [{ url: v }]
						return
					}
					if (!this.images.length) {
						const arr = JSON.parse(JSON.stringify(v))
						this.imageValue = arr
						this.images = v
					}
					if (!v || !v.length) {
						this.imageValue = []
						this.images = []
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 文件类型 image：图片 video：视频 other:其他
			select(e) {
				let fileType = this.fileMediatype == 'all' ? 'other' : this.fileMediatype
				if (e.tempFiles && e.tempFiles[0]) {
					if (['jpg', 'jpeg', 'png'].includes(e.tempFiles[0].extname)) {
						fileType = 'image'
					}
				}
				const params = {
					filePath: e.tempFilePaths[this.num],
					fileType
				}
				
				protal.uploadPic(params).then(res => {
					this.images.push({
						url: res,
						name: res,
					})
					this.successArr.push(e.tempFiles[this.num].uuid)
					this.isCooperate = true
					this.$emit('input', this.limitLength == 1 ? res : this.images)
					if (e.tempFilePaths[this.num + 1]) {
						this.num++
						this.select(e)
					} else {
						this.num = 0
					}
				})
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功', e)
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

			deleteFn(e) {
				if (e.tempFile.name) {
					this.images = this.images.filter(x => x.name != e.tempFile.name)
				} else {
					this.images = this.images.filter(x => x.url != e.tempFile.url)
				}
				this.isCooperate = true
				if (this.limitLength == 1) {
					this.$emit('input', '')
				} else {
					this.$emit('input', this.images)
				}
				console.log('删除文件：', e)
			},
		}
	}
</script>

<style lang="less" scoped>
	.upload-default {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}
	
	.upload-icon {
		.img {
			width: 68rpx;
			height: 68rpx;
			display: block;
			margin: 0 auto;
		}

		.text {
			font-family: AlibabaPuHuiTi_3_55_Regular;
			font-size: 24rpx;
			color: #8A8E99;
			line-height: 24rpx;
			text-align: center;
			font-style: normal;
			display: block;
			margin-top: 8rpx;
		}
	}
</style>